var MenuItem = function(pstr, pforecolor, pbackcolor, pimageurl, ponclick)
{
	this.id = (new Date()).getTime().toString() + "menuitem" + Math.floor(Math.random() * Math.floor(Math.random() * Math.random() * 9999)).toString();
	this.str = pstr;
	this.forecolor = pforecolor;
	this.backcolor = pbackcolor;
	this.imageurl = pimageurl;
	this.onclick = ponclick;
}

var MenuBar = function(pid)
{
	this.rootid = pid;
	this.rootnode = document.getElementById(this.rootid);
	this.instancename = this.rootnode.getAttribute("instancename");
	this.menutagname = this.rootnode.getAttribute("menutagname");

	this.mitems = new Array();
	this.mitems.length = 0;

	this.curtainid = this.instancename + (new Date()).getTime().toString() + "curtain";
	this.goleftid = this.instancename + (new Date()).getTime().toString() + "goleftbutton";
	this.gorightid = this.instancename + (new Date()).getTime().toString() + "gorightbutton";
	this.faceid = this.instancename + (new Date()).getTime().toString() + "face";

	this.currenty = 0;
	this.currentx = 0;

	this.canvheight = 150;

	this.menumargin = 21;
	this.menuwidth = 150;

	this.addmenu = function(pmi)
	{
		this.mitems[this.mitems.length] = pmi;
	}

	this.drawimage = function(pimageid, pcanvasid)
	{
		var myi = document.getElementById(pimageid);
		var canv = document.getElementById(pcanvasid);
		var cx = canv.getContext("2d");
		cx.drawImage(myi, 10, 10, canv.width - 10 * 2, canv.height - 20 - 20);
	}

	this.displaylrbutton = function()
	{
		var canv = document.body.appendChild(document.createElement("canvas"));
		canv.setAttribute("id", this.goleftid);
		canv.style.position = "absolute";
		canv.width = 20;
		canv.height = 80;
		canv.style.top = (Math.floor(this.canvheight / 4) - this.currenty).toString() + "px";
		canv.style.left = 0;
		canv.style.zIndex = 102;
		canv.style.background = "transparent";

		canv.setAttribute("onclick", this.instancename + ".goright();");

		var cx = canv.getContext("2d");
		//cx.fillStyle = "blue";
		//cx.fillRect(0,0,canv.width, canv.height);
		cx.fillStyle = "lightgray";
		cx.beginPath();
		cx.moveTo(0, (Math.floor(canv.height / 2)));
		cx.lineTo(20, (Math.floor(canv.height / 2) - 40));
		cx.lineTo(20, (Math.floor(canv.height / 2) + 40));
		cx.closePath();
		cx.fill();

		canv = document.body.appendChild(document.createElement("canvas"));
		canv.setAttribute("id", this.gorightid);
		canv.style.position = "absolute";
		canv.width = 20;
		canv.height = 80;
		canv.style.top = (Math.floor(this.canvheight / 4) - this.currenty).toString() + "px";
		canv.style.left = (window.innerWidth - 20).toString() + "px";
		canv.style.zIndex = 102;
		canv.style.background = "transparent";

		canv.setAttribute("onclick", this.instancename + ".goleft();");

		cx = canv.getContext("2d");
		cx.fillStyle = "lightgray";
		cx.beginPath();
		cx.moveTo(canv.width - 20, Math.floor(canv.height / 2) - 40);
		cx.lineTo(canv.width, Math.floor(canv.height / 2));
		cx.lineTo(canv.width - 20, (Math.floor(canv.height / 2) + 40));
		cx.closePath();
		cx.fill();
	}

	this.displayface = function()
	{
		var canv = document.body.appendChild(document.createElement("canvas"));
		canv.setAttribute("id", this.faceid);
		canv.style.position = "absolute";
		canv.style.left = 0;
		canv.style.top = 0;
		canv.style.zIndex = 99;
		canv.width = window.innerWidth;
		canv.height = 30;
		canv.setAttribute("onclick", this.instancename + ".show();");
		var cx = canv.getContext("2d");
		cx.beginPath();
		cx.fillStyle = "blue";
		cx.fillRect(0,0,canv.width, canv.height);
		cx.closePath();
	}

	this.displaymenu = function()
	{
		for(var icnt = 0; icnt < this.mitems.length; icnt++)
		{
			var mi = this.mitems[icnt];
			var canv = document.body.appendChild(document.createElement("canvas"));
			canv.setAttribute("id", mi.id);
			canv.style.position = "absolute";
			canv.width = this.menuwidth;
			canv.height = this.canvheight - this.menumargin * 2;
			canv.style.zIndex = 101;
			canv.style.top = (0 + this.menumargin - this.currenty).toString() + "px";
			canv.style.left = (0 + this.menumargin + icnt * (this.menumargin + this.menuwidth) + this.currentx).toString() + "px";
			var cx = canv.getContext("2d");
			cx.beginPath();
			cx.fillStyle = mi.backcolor;
			cx.fillRect(0,0,canv.width, canv.height);
			cx.fillStyle = mi.forecolor;
			cx.font = "bold 20px 'MS UI Gothic'";
			cx.textAlign = "start";
			cx.fillText(mi.str, 10, canv.height - 10);

			var myi = document.body.appendChild(document.createElement("img"));
			var imageid = mi.id + "image";
			myi.setAttribute("id", imageid);
			myi.style.display = "none";
			myi.setAttribute("onload", this.instancename + ".drawimage('" + imageid + "', '" + mi.id + "');");
			myi.setAttribute("src", mi.imageurl);

			cx.closePath();

			canv.setAttribute("onclick", mi.onclick + ";" + this.instancename + ".hide();");
		}
	}

	this.display = function()
	{
		var canv = document.body.appendChild(document.createElement("canvas"));
		canv.style.position = "absolute";
		canv.width = window.innerWidth;
		canv.height = this.canvheight;
		this.currenty = canv.height;
		canv.style.top = (0 - this.currenty).toString() + "px";
		canv.style.left = 0;
		canv.style.zIndex = 100;
		var cx = canv.getContext("2d");
		cx.beginPath();
		cx.fillStyle = "rgba(0,0,0,0.7)";
		cx.fillRect(0,0,canv.width,canv.height);
		cx.closePath();

		canv.setAttribute("id", this.curtainid);
		canv.setAttribute("onclick", this.instancename + ".hide();");

		//this.displayface();
		this.displaymenu();
		this.displaylrbutton();
	}

	this.show = function()
	{
		this.doani(true);
	}

	this.doani = function(pup)
	{
		var bcontinue = false;
		var canv = document.getElementById(this.curtainid);
		if(pup)
		{
			this.currenty = this.currenty - 5;
			bcontinue = this.currenty > 0;
			if(this.currenty < 0)
			{
				this.currenty = 0;
			}
		}
		else
		{
			this.currenty = this.currenty + 5;
			bcontinue = this.currenty < canv.height;
			if(this.currenty > canv.height)
			{
				this.currenty = canv.height;
			}
		}
		canv.style.top = (0 - this.currenty).toString() + "px";
		this.reflectanimenu();
		this.reflectanilr();
		if(bcontinue)
		{
			setTimeout(this.instancename + ".doani(" + pup.toString() + ");", 1);
		}
	}

	this.reflectanimenu = function()
	{
		for(var icnt = 0; icnt < this.mitems.length; icnt++)
		{
			var mi = this.mitems[icnt];
			var canv = document.getElementById(mi.id);
			canv.style.top = (0 + this.menumargin - this.currenty).toString() + "px";
		}
	}

	this.reflectanilr = function()
	{
		var canv = document.getElementById(this.goleftid);
		canv.style.top = (Math.floor(this.canvheight / 4) - this.currenty).toString() + "px";
		canv = document.getElementById(this.gorightid);
		canv.style.top = (Math.floor(this.canvheight / 4) - this.currenty).toString() + "px";
	}

	this.targetx = 0;
	this.lrcore = function(pleft)
	{
		var bcontinue = false;
		if(pleft)
		{
			this.currentx = this.currentx - 5;
			bcontinue = this.currentx > this.targetx;
			if(this.currentx < this.targetx)
			{
				this.currentx = this.targetx;
			}
		}
		else
		{
			this.currentx = this.currentx + 5;
			bcontinue = this.currentx < this.targetx;
			if(this.currentx > this.targetx)
			{
				this.currentx = this.targetx;
			}
		}

		for(var icnt = 0; icnt < this.mitems.length; icnt++)
		{
			var mi = this.mitems[icnt];
			var canv = document.getElementById(mi.id);
			canv.style.left = (0 + this.menumargin + icnt * (this.menumargin + this.menuwidth) + this.currentx).toString() + "px";
		}

		if(bcontinue)
		{
			setTimeout(this.instancename + ".lrcore(" + pleft.toString() + ");", 1);
		}
	}

	this.goleft = function()
	{
		this.targetx = this.currentx - (this.menuwidth + this.menumargin) * 5;
		if(this.targetx < 0 - this.mitems.length * (this.menuwidth + this.menumargin) + window.innerWidth)
		{
			this.targetx = 0 - this.mitems.length * (this.menuwidth + this.menumargin) + window.innerWidth;
		}
		this.lrcore(true);
	}

	this.goright = function()
	{
		this.targetx = this.currentx + (this.menuwidth + this.menumargin) * 5;
		if(this.targetx > 0)
		{
			this.targetx = 0;
		}
		this.lrcore(false);
	}

	this.hide = function()
	{
		this.doani(false);
	}

	var ml = document.getElementsByTagName(this.menutagname);
	for(var icnt = 0; icnt < ml.length; icnt++)
	{
		var mle = ml[icnt];
		var title = mle.getAttribute("title");
		var forecolor = mle.getAttribute("color");
		if((!forecolor) || (forecolor == ""))
		{
			forecolor = "white";
		}
		var backcolor = mle.getAttribute("bgcolor");
		if((!backcolor) || (backcolor == ""))
		{
			backcolor = "rgba(0,0,0,0)";
		}
		var imagesource = mle.getAttribute("imgsrc");
		var action = mle.getAttribute("action");

		this.addmenu(new MenuItem(title, forecolor, backcolor, imagesource, action));
	}
}
